<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>飞机大战</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            position: relative;
        }

        #main {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, 20%);
            width: 320px;
            height: 500px;
            background: url('./images/background_1.png');
            overflow: hidden;
        }

        #killNum {
            position: absolute;
            left: 50%;
            width: 320px;
            transform: translate(-50%, 50%);
            background-image: linear-gradient(#9a9e9f, #c3c8c9);
            color: white;
            font-size: 20px;
            border-top-left-radius: 33px;
            border-top-right-radius: 33px;
            height: 67px;
            line-height: 67px;
            text-align: center;

        }

        #killNumWarp {
            margin: 0px 20px;
        }
    </style>

</head>

<body>
    <div id="killNum">
        <div id="killNumWarp">
            击落飞机：
            <span id="killNumItem">15</span>
        </div>
    </div>
    <div id="main">
    </div>
    <audio src="./audio/bgm_dfzhandou.mp3" loop id="statrMusic"></audio>
    <audio src="./audio/arrow_shot.wav" id="zdMusic"></audio>

</body>
<script>
    const killNumItem = document.getElementById('killNumItem');
    const timeOut = 1000;//时隔多久产生一台飞机
    const MAIN = document.querySelector('#main');
    const bubuArr = [];
    const dbubuArr = [];
    let upBtn = false;//按键开关
    let leftBtn = false;
    let rightBtn = false;
    let downBtn = false;
    let zd = false;
    //音频调用
    let statrMusic = document.getElementById('statrMusic');
    let zdMusic = document.getElementById('zdMusic');
    // statrMusic.play();
    //创建敌方飞机
    //imgSrc 敌方飞机的 图片 敌方飞机的坐标 敌方飞机的移动速度
    //创建出来图片
    class parentPlane {
        imgNode = document.createElement('img');
        imgSrc = null;
        x = 0;
        y = 0;
        speed = 0;
        constructor(imgSrc, x, y, speed) {
            this.imgSrc = imgSrc;
            this.x = x;
            this.y = y;
            this.speed = speed;
            this.init();
        }
        init() {
            this.imgNode.src = this.imgSrc;
            this.imgNode.style.position = 'absolute';
            this.imgNode.style.top = this.y + 'px';
            this.imgNode.style.left = this.x + 'px';
            MAIN.appendChild(this.imgNode);

        }
        top(value) {
            return parseInt(value);
        }
    }


    const dArr = [];
    class DAirplane extends parentPlane {
        left = false;
        typePlane = 0;
        exTime = 30;
        constructor(imgSrc, x, y, speed, typePlane) {
            super(imgSrc, x, y, speed);
            super.init();
            this.typePlane = typePlane;
        }
        move() {
            this.imgNode.style.top = parseInt(this.imgNode.style.top) + this.speed + 'px';
            //每次都加上他移动速度的初始值
        }
        shoot() {
            var newBullet = new bubu("images/bullet1.png", parseInt(this.imgNode.style.left) + 31, parseInt(this.imgNode.style.top) - 10, 100);
            dbubuArr.push(newBullet);
        }
    }

    setInterval(() => {
        let temp = parseInt(Math.random() * 2) + 1;
        let item = new DAirplane(`./images/enemy${temp}_fly_1.png`, parseInt(Math.random() * 356 - 34), -parseInt(Math.random() * 100 + 40), parseInt(Math.random() * 10) + 1, temp);
        dArr.push(item);
    }, timeOut);
    //ew DAirplane('./images/enemy1_fly_1.png', 0, 0, 2);
    // let item = new DAirplane('./images/enemy1_fly_1.png', 10, 0, parseInt(Math.random() * 10) + 1);

    // dArr.push(item);
    // dArr[0].imgNode.style.top = '500px';
    // console.log(dArr[0].imgNode.style.top);
    function Dmove() {
        // console.log(dArr.length);
        for (let i = 0; i < dArr.length; i++) {
            if (!dArr[i].left) {
                dArr[i].move();
                if (parseInt(dArr[i].imgNode.style.top) >= 550) {
                    MAIN.removeChild(dArr[i].imgNode);
                    dArr.splice(i, 1);
                }
            } else {
                dArr[i].exTime--;
                if (dArr[i].exTime == 0) {
                    MAIN.removeChild(dArr[i].imgNode);
                    dArr.splice(i, 1);

                }
            }
        }
    }

    setInterval(Dmove, 50);

    //我放飞机的绘制
    class plane extends parentPlane {
        constructor(imgSrc, x, y, speed) {
            super(imgSrc, x, y, speed);
            super.init();
        }
        topMove() {
            if (parseInt(this.imgNode.style.top) > 5) this.imgNode.style.top = parseInt(this.imgNode.style.top) - this.speed + 'px';
        }
        leftMove() {
            if ((parseInt(this.imgNode.style.left) > -33)) this.imgNode.style.left = parseInt(this.imgNode.style.left) - this.speed + 'px';

        }
        rightMove() {
            if ((parseInt(this.imgNode.style.left) < 288)) this.imgNode.style.left = parseInt(this.imgNode.style.left) + this.speed + 'px';

        }
        bottomMove() {
            if (parseInt(this.imgNode.style.top) < 420) this.imgNode.style.top = parseInt(this.imgNode.style.top) + this.speed + 'px';
        }
        shoot() {
            var newBullet = new bubu("images/bullet1.png", parseInt(this.imgNode.style.left) + 31, parseInt(this.imgNode.style.top) - 10, 30);
            // var newBullet = new zdPlay("images/bullet1.png", parseInt(this.imgNode.style.left), parseInt(this.imgNode.style.top), 30, 35);
            // console.log(newBullet);
            bubuArr.push(newBullet);

        }

    }

    let myPlane = new plane('./images/myplane.gif', 0, 420, 20);
    myPlane.imgNode.style.zIndex = '100';
    // setInterval(() => { myPlane.shoot(); }, 100);
    //玩家移动
    document.body.onkeydown = function (e) {
        if (e.keyCode == 37 || e.keyCode == 65) {
            //左
            leftBtn = true;
        } else if (e.keyCode == 38 || e.keyCode == 87) {
            //上
            // myPlane.imgNode.style.left
            upBtn = true;
        } else if (e.keyCode == 40 || e.keyCode == 83) {
            //下
            downBtn = true;
        } else if (e.keyCode == 39 || e.keyCode == 68) {
            //右
            rightBtn = true;
        } else if (e.keyCode == 110) {
            //发射子
            // console.log(e);

            zd = true;
        }
    };
    document.body.onkeyup = function (e) {
        if (e.keyCode == 37 || e.keyCode == 65) {
            //左
            leftBtn = false;
        } else if (e.keyCode == 38 || e.keyCode == 87) {
            //上
            // myPlane.imgNode.style.left
            upBtn = false;
        } else if (e.keyCode == 40 || e.keyCode == 83) {
            //下
            downBtn = false;
        } else if (e.keyCode == 39 || e.keyCode == 68) {
            //右
            rightBtn = false;
        } else if (e.keyCode == 110) {
            //发射子

            zd = false;

        }
    };

    function myPlanePaly() {
        if (leftBtn == true) {
            myPlane.leftMove();
        }
        if (rightBtn == true) {
            myPlane.rightMove();
        }
        if (upBtn == true) {
            myPlane.topMove();
        }
        if (downBtn == true) {
            myPlane.bottomMove();
        }
        if (zd == true) {
            myPlane.shoot();
            zdMusic.play();
        }
    }
    setInterval(myPlanePaly, 50);

    //创建子弹
    class bubu extends parentPlane {
        constructor(imgSrc, x, y, speed) {
            super(imgSrc, x, y, speed);
            super.init();
        }
        move() {
            this.imgNode.style.top = parseInt(this.imgNode.style.top) - this.speed + 'px';
        }
    }

    //子弹移动
    function bubuMove() {
        for (var i = 0; i < bubuArr.length; i++) {
            bubuArr[i].move();
            if ((parseInt(bubuArr[i].imgNode.style.top) <= -20)) {
                MAIN.removeChild(bubuArr[i].imgNode);
                bubuArr.splice(i, 1);
            }
        }
    }
    setInterval(bubuMove, 50);

    //碰撞函数
    function crashCheck() {
        // alert('bubuLeft');
        for (let i = 0; i < dArr.length; i++) {
            for (let j = 0; j < bubuArr.length; j++) {
                let bubuLeft = parseInt(bubuArr[j].imgNode.style.left);
                let bubuTop = parseInt(bubuArr[j].imgNode.style.top);
                let dPlaneLeft = parseInt(dArr[i].imgNode.style.left);
                let dPlaneTop = parseInt(dArr[i].imgNode.style.top);
                if (dArr[i].left == false) {
                    if (bubuLeft >= dPlaneLeft && bubuLeft < dPlaneLeft + 34 && bubuTop <= dPlaneTop + 12 && bubuTop >= dPlaneTop) {
                        MAIN.removeChild(bubuArr[j].imgNode);
                        bubuArr.splice(j, 1);
                        dArr[i].imgNode.src = './images/smallplaneboom.gif';
                        dArr[i].left = true;//飞机死亡
                        killNumItem.innerHTML = killNumItem.innerHTML * 1 + 1;
                    }
                }
            }
        }
    }
    setInterval(crashCheck, 50);
    //外挂处理
    class zdPlay {
        imgNode = [];
        imgSrc = null;
        x = 0;
        y = 0;
        speed = 0;
        num = 0;
        constructor(imgSrc, x, y, speed, num) {
            this.imgSrc = imgSrc;
            this.x = x;
            this.y = y;
            this.speed = speed;
            this.num = num;
            this.init();

        }
        init() {
            for (let i = 0; i < this.num; i++) {
                let item = document.createElement('img');
                this.imgNode.push(item);
            }
            this.imgNode.forEach((item, index) => {
                item.src = this.imgSrc;
                item.style.position = 'absolute';
                item.style.top = this.y + 'px';
                item.style.left = this.x + index * 10 + 'px';
                MAIN.appendChild(item);
            });

        }
        move() {
            this.imgNode.forEach((item) => {
                item.style.top = parseInt(item.style.top) - this.speed + 'px';
            });
        }

    }


</script>

</html>